<template>
    <div class="nav-menu-template">
        <el-menu :default-openeds="defaultOpeneds">
            <div v-for="(itemMenu,index) in menuList" :key="index">
                <el-menu-item v-if="!itemMenu.children" :index="itemMenu.index" @click="togglePages(itemMenu,false)"
                              :class="{'active':itemMenu.active}">
                    <i class="fa fa-fw" :class="itemMenu.icon"></i>
                    <span slot="title">{{itemMenu.label}}</span>
                </el-menu-item>
                <el-submenu v-if="itemMenu.children" :index="itemMenu.index">
                    <template slot="title">
                        <i class="fa fa-fw" :class="itemMenu.icon"></i>
                        <span>{{itemMenu.label}}</span>
                    </template>
                    <el-menu-item v-for="(itemSubMenu,subIndex) in itemMenu.children" :key="subIndex"
                                  :class="{'active':itemSubMenu.active}"
                                  :index="itemSubMenu.subIndex" @click="togglePages(itemMenu,true,subIndex)">
                        <i class="fa fa-fw" :class="itemSubMenu.icon"></i>
                        <span slot="title">{{itemSubMenu.label}}</span>
                    </el-menu-item>
                </el-submenu>
            </div>
        </el-menu>
    </div>
</template>

<script>
    export default {
        name: 'navMenu',
        data() {
            return {
                defaultActive: '1',
            }
        },
        computed: {
            menuList() {
                return this.$store.state.menuStore.menuList;
            },
            defaultOpeneds() {
                let arr = [];
                _.forEach(this.menuList, item => {
                    if (item.children && item.children.some(sub => sub.active)) {
                        arr.push(item.index);
                    }
                });
                return arr;
            }
        },
        methods: {
            togglePages(curMenu, isSub, subIndex) {
                this.$store.commit('changeMenu', {
                    vm: this,
                    'curMenu': curMenu,
                    'isSub': isSub,
                    'subIndex': subIndex
                });
                let path = null;
                if (isSub) {
                    path = curMenu.children[subIndex].path;
                } else {
                    path = curMenu.path;
                }
                this.$router.push({name: path});
            },
        },
        mounted() {

        }
    }
</script>

<style lang="scss">
    @import "src/common/common.style";
    .nav-menu-template {
        @include ofy-a();
        @include ofx-h();
        @include bgImg("bg-nav.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        min-width: 150px;
        height: 100%;
        text-align: start;
        background-color: rgb(249, 249, 249);
        border-right: 1px solid #dddddd;
        > ul {
            background-color: transparent !important;
            border-right: none;
        }
    }

</style>
